<template>
  <el-dialog
    :title="type === 'add' ? '新增供应商' : '修改供应商'"
    width="50%"
    top="30vh"
    :visible.sync="isShow"
    @close="_onCancel(false)"
  >
    <el-form ref="myRoleForm" class="clearfix" :model="roleForm" label-width="100px">
      <el-form-item label="供应商编码:">
        <el-input v-model="roleForm.supplierCode" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="供应商名称:">
        <el-input v-model="roleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="联系人:">
        <el-input v-model="roleForm.contacts"></el-input>
      </el-form-item>
      <el-form-item label="联系电话:">
        <el-input v-model="roleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="供应商地址:">
        <el-input v-model="roleForm.contactsAddress"></el-input>
      </el-form-item>
      <el-form-item label="传真:">
        <el-input v-model="roleForm.fax"></el-input>
      </el-form-item>
      <el-form-item label="银行资料:">
        <el-input v-model="roleForm.bankInfor"></el-input>
      </el-form-item>
      <el-form-item label="邮件地址:">
        <el-input v-model="roleForm.mailAddress"></el-input>
      </el-form-item>
      <el-form-item style="width: 930px" label="备注信息:">
        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="roleForm.remarks"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="_onSave">保 存</el-button>
      <el-button @click="_onCancel(false)">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { editSupplier, addSupplier } from "@/http/supplierManagementApi";
export default {
  name: "SupplierDailog",
  props: {
    type: {
      type: String,
      required: true
    },
    dataInfo: {
      type: null || Object
    }
  },
  created() {
    if (this.dataInfo !== null) {
      this.roleForm = this.dataInfo;
    }
  },
  data() {
    return {
      isShow: true,
      roleForm: {
        id: "",
        supplierCode: "",
        name: "",
        contacts: "",
        phone: "",
        contactsAddress: "",
        fax: "",
        bankInfor: "",
        mailAddress: "",
        remarks: "",
        is_delete: "1"
      }
    };
  },
  methods: {
    _onCancel() {
      this.$emit("cancel");
    },
    _onSave() {
      if (this.type == "edit") {
        this.$confirm("是否继续此操作?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          editSupplier(this.dataInfo)
            .then(res => {
              this.$message.success(res.data.msg);
              this.$emit("cancel");
            })
            .catch(err => {
              console.log(err);
            });
        });
      } else if (this.type == "add") {
        this.$confirm("是否继续此操作?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          addSupplier(this.roleForm)
            .then(res => {
              this.$message.success(res.data.msg);
              this.$emit("cancel");
            })
            .catch(err => {
              console.log(err);
            });
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__title {
  font-size: 20px;
}
.el-form-item {
  float: left;
  width: 310px;
}
</style>>